<template>
  <div
    v-loading="isLoading"
    style="height: calc(100% - 0px)"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="top_llfxChart">
      <div class="RightCardTitle">村庄预警统计</div>
      <el-row style="height:90%">
      <el-col :span="11" style="height:95%">
        <!-- class="chartsCss" -->
        <Newecharts id="llfxChartFx" style="height:100%;width:100%" :option="ChartFxData"  />
      </el-col>
       <el-col :span="13">
          <!-- ['#ce1f1f', '#f0810b', '#f0c90b', '#00a2fb'] -->
        <div class="chartopdv">
          <p class="charp" v-for="(item,ind) in echarlist" :key="ind">
            <span class="charpsp1" :class="'bacol'+ind"></span>
            <span class="charpsp2">{{item.Txt}}</span>
            <span class="charpsp3">{{item.Count}}</span>
            <span class="charpsp4">{{item.percent}}%</span>
          </p>
        
        </div>
       </el-col>
      </el-row>
      
    </div>

    <div class="tableBox">
      <div class="RightCardTitle">村庄预警详情</div>
      <!-- <div class="titleList">
        <span>乡镇</span>
        <span>村庄名称</span>
        <span>人口数</span>
        <span>防汛责任人</span>
      </div> -->
      <template v-if="FxDetailsList.length>0">
        <el-collapse class="collapse_div" accordion>
          <el-collapse-item class="m-t-5"
            v-for="(item, index) in FxDetailsList"
            :key="index"
            :class="'warningLevel' + item.Lvl"
          >
            <template slot="title" style="color: red">
              {{ item.Txt }}
              <span class="rightTitle">
                <span>{{ item.Count }}</span>个村庄
              </span>
            </template>
            <div class="stationLst">
               <div class="titleList  m-t-5">
                <span>乡镇</span>
                <span>村庄名称</span>
                <span>人口数</span>
                <span>防汛责任人</span>
              </div>
              <ul class="stationLstul">
                <template v-if="item.Detail.length > 0">
                  <li class="m-t-5"
                    v-for="(stationLstItrm, indexStationLst) in item.Detail"
                    :key="indexStationLst"
                    :class="{ tableBgList: tableFXdetails == item.Lvl+'-'+indexStationLst }"
                    @click="tableList(stationLstItrm, item.Lvl+'-'+indexStationLst)"
                  >
                    <span>{{ stationLstItrm.Country }}</span>
                    <span>{{ stationLstItrm.Village }}</span>
                    <span>{{ stationLstItrm.PNum }}</span>
                    <span>{{ stationLstItrm.UserName || '' }}</span>
                  </li>
                </template>
                <template v-else>
                  <div class="noDataLists">暂无数据</div>
                </template>
              </ul>
            </div>
          </el-collapse-item>
        </el-collapse>
      </template>
      <template v-else>
        <div class="noDataLists">暂无数据</div>
      </template>
    </div>
  </div>
</template>
<script>
import Newecharts from '@/views/components/newecharts.vue'
import {
    GetEarlyWarningStatistics
} from '@/api/xuna.js'
export default {
    name: 'FxyjDetails',
    components: {
        Newecharts
    },
    data() {
        return {
            ChartTestData: {},
            FXitem: {}, // 风险预警的参数
            ChartFxData: {}, // 风险的图表
            FxDetailsList: [],
            TimeRain: '',
            tableFXdetails: -1,
            isLoading: false,
            fxyjEventform: {},
            echarlist:[],
        }
    },
    beforeDestroy() {
      this.$eventBus.$off('fxyjEvent')
    },
    created() {
        this.$eventBus.$on('fxyjEvent', (res) => {
         //   console.log(res)
            if (res) {
                this.fxyjEventform = res
                this.FxDetails(res)
            }
        })
    },
    mounted() {
    },
    methods: {
        change(index) {
            this.selectNum = index
        },
        getSrcList(val) {
            this.TimeRain = val.TimeRain
            this.FxDetails(val)
        },
        // 右侧列表点击
        tableList(item, index) {
            this.tableFXdetails = index
            // const dlgParams = this.$store.getters.dlgParams
            // dlgParams.name = 'SendMessageDig'
            // dlgParams.params = [{
            //     ... this.fxyjEventform,
            //     ...item
            // }]
            // this.$store.dispatch('dlgParams', dlgParams)
            this.$eventBus.$emit('flyToVillage_FXZQ', item.Ewcode)
        },
        // 风险详情
        FxDetails(e) {
            this.isLoading = true
            GetEarlyWarningStatistics({
                wswscd: e.strWscd,
                strMainId: e.id
            }).then((res) => {
                this.isLoading = false
                if (res.isSuccess) {
                    this.getFxecharts(res.data)
                    this.FxDetailsList = res.data.filter(function(item, index) {
                        return item.Detail.length > 0
                    })
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        getFxecharts(FxDetailsList) {
            let arlist = FxDetailsList;
            let total = 0;
            arlist.forEach(item=>{
               total += parseFloat(item.Count)
            });
             arlist.forEach(item=>{
               if(total == 0){
                  item['percent'] = 0;
               }else{
                let num  = (parseFloat(item.Count) /total) * 100
                if(!/\./.test(num)){//如果没有小数点
                 item['percent'] = num;
                }else{
                  item['percent'] = num.toFixed(1);
                }
               }
            });
            this.echarlist = arlist;
            const colorList = ['#ce1f1f', '#f0810b', '#f0c90b', '#1c38a1']
            this.ChartFxData = {
                tooltip: {
                    show:true,
                    trigger: 'item',
                    position: ['40%', '40%'],
                    textStyle:{
                      color: '#ffffff',
                    },
                    backgroundColor:'rgba(2,0,31,0.65)',
                    borderColor:'rgba(2,0,31,0.65)',
                },
                legend: {
                    show: false
                },
                color: colorList,
                series: [{
                    type: 'pie',
                    radius: ['50%','90%'], // 饼图半径
                    center: ['50%', '50%'],
                    //roseType: 'area',
                    itemStyle: {
                        borderRadius: 0
                    },
                    label: {
                        show: false,
                        color: '',
                        formatter: '{c} \n {b}', // b代表名称，c代表对应值，d代表百分比
                        overflow:'breakAll',
                        lineHeight:16,
                    },
                    // data:sedat,
                    data: arlist.map(function(v, i) {
                        v.label = {
                            color: colorList[i]
                        }
                        return {
                            ...v,
                            value: v.Count,
                            name: v.Txt
                        }
                    })
                }]
            }
        }
    }
}
</script>

<style lang="less" scoped>
	.top_llfxChart {
		height: 300px;
	}

	.tableBox {
    width: 100%;
		height: calc(100% - 300px);
    background: rgba(3,34,55,0.4);
    padding: 5px 5px 0px 0px;
    overflow: hidden;
		.collapse_div {
			height: calc(100% - 40px);
			overflow: auto;
		}
  }
  .chartopdv{
    width:100%;
    padding-right:5px;
    margin-top:40px;
    box-sizing: border-box;
  }
  .charp{
    width:100%;
    height: 32px;
    background: rgba(0,150,255,0.3);
    line-height: 32px;
    padding-left:5px;
    margin-bottom:10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
  }
  .charpsp1{
    display: inline-block;
    width:14px;
    height:14px;
    background:#ce1f1f;
  }
  .charpsp2{
   display: inline-block;
   color: #B2C7D9;
   font-size:14px;
   padding-left: 5px;
   text-align: left;
   flex:4;
  }
  .charpsp3{
   display: inline-block;
   color: #fff;
   font-size:14px;
   flex:2;
  }
  .charpsp4{
   display: inline-block;
   color: #fff;
   font-size:14px;
   flex:2;
  }
  .bacol1{
     background:#f0810b;
  }
  .bacol2{
     background:#f0c90b;
  }
  .bacol3{
     background:#1c38a1;
  }

  
</style>
